<template>
  <div class="main">
    <!-- 侧边栏区域 -->
    <el-container>
      <el-aside :width="menuStatus ? '60px' : '210px'">
        <nav-menu :menuStatus="menuStatus"></nav-menu>
      </el-aside>
      <el-container>
        <!-- header区域 -->
        <el-header>
          <nav-header @changeStatus="changeStatus"></nav-header>
        </el-header>

        <!-- 路由视图 -->
        <el-main>
          <div class="page">
            <router-view></router-view>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue"
import NavMenu from "@/components/nav-menu"
import NavHeader from "@/components/nav-header"
export default defineComponent({
  components: {
    NavMenu,
    NavHeader,
  },
  setup() {
    const menuStatus = ref(false)
    // 接收header组件发出的展开折叠事件
    const changeStatus = (newStatus: boolean) => {
      menuStatus.value = newStatus
    }
    return {
      changeStatus,
      menuStatus,
    }
  },
})
</script>
<style lang="less" scoped>
.user {
  background-color: #fff;
}
.el-header {
  background-color: #fefefe;
  color: var(--el-text-color-primary);
  text-align: center;
  line-height: 70px;
  height: 70px;
}

.el-aside {
  background-color: #071d2e;
  color: var(--el-text-color-primary);
  text-align: center;
  line-height: 200px;
}

.el-main {
  background-color: #f2f6ff;
  padding: 10px;
}

.main {
  height: 100%;
}
.el-container {
  height: 100%;
}
.el-aside {
  transition: all 0.5s ease;
}

.page {
  background: #f4f7ff;
  height: 100%;
}
</style>
